<template>
  <div id="Sordinaryapply" class="same-change-oldstyle">
    <div>
      <div class="same-head-box">
        <div class="saem-seat-box">
          <div class="saem-seat-left">
            <span>当前位置：</span>
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item>加盟商管理</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/franchiseeList' }">我的加盟商</el-breadcrumb-item>
              <el-breadcrumb-item>{{ (pageType==1 && "添加加盟商") || (pageType==2 && "编辑加盟商")}}
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="saem-seat-right" style="margin: 10px 0;">
            <button class="same-search-btns same-search-export" @click="RefreshFun"
              v-if="pageType==2 || pageType==3">刷新</button>
            <button class="same-search-btns" @click="returnBack">返回</button>
          </div>
        </div>
      </div>
      <div class="edit-box">
        <div class="edit-top-box">
          <i class='el-icon-s-custom'></i> 加盟商信息
        </div>
        <div class="edit-body-box">

          <div class="edit-list-box">
            <div class="label-box">姓名</div>
            <div class="edit-cont-box">
              <div class="edit-one">
                <el-input size="medium" type="text" name="account_name" v-model="account_name" placeholder="请输入加盟商姓名"
                  maxlength="16" />
              </div>
              <i class="i-show">*</i>
            </div>
          </div>

          <div class="edit-list-box">
            <div class="label-box">手机号码</div>
            <div class="edit-cont-box">
              <div class="edit-one">
                <el-input size="medium" type="tel" name="tel" maxlength="11" v-model="tel" placeholder="请输入手机号码" />
              </div>
              <i class="i-show">*</i>
            </div>
          </div>

          <div class="edit-list-box">
            <div class="label-box">账号</div>
            <div class="edit-cont-box">
              <div class="edit-one">
                <el-input size="medium" :disabled="pageType==2" type="tel" name="tel" v-model="account"
                  placeholder="请输入账号" />
              </div>
              <i class="i-show">*</i>
            </div>
          </div>


          <div class="edit-list-box">
            <div class="label-box">身份证号</div>
            <div class="edit-cont-box">
              <div class="edit-one">
                <el-input size="medium" type="text" name="ID_card" maxlength="18" v-model="ID_card"
                  placeholder="请输入身份证号" />
              </div>
            </div>
          </div>

          <div class="edit-list-box">
            <div class="label-box">密码</div>
            <div class="edit-cont-box">
              <div class="edit-one">
                <el-input size="medium" show-password type="password" name="password" v-model="password"
                  placeholder="请设置登录密码" />
              </div>
              <i class="i-show">*</i>
            </div>
          </div>

          <div class="edit-list-box">
            <div class="label-box">密码确认</div>
            <div class="edit-cont-box">
              <div class="edit-one">
                <el-input size="medium" show-password type="password" name="rpassword" v-model="rpassword"
                  placeholder="请再次输入密码" />
              </div>
              <i class="i-show">*</i>
            </div>
          </div>



          <div class="edit-list-box">
            <div class="label-box">详细地址</div>
            <div class="edit-cont-box">
              <div class="edit-one">
                <el-input size="medium" type="text" name="address" v-model="address" placeholder="请输入详细地址" />
              </div>
              <i class="i-show">*</i>
            </div>
          </div>
        </div>

        <div class="edit-top-box" style="margin-top: -20px;">
          <i class='el-icon-s-opportunity'></i> 加盟商账户
        </div>
        <div class="edit-body-box">

          <div class="edit-list-box">
            <div class="label-box">是否自营</div>
            <div class="edit-cont-box">
              <el-radio v-model="is_self" label="1">自营</el-radio>
              <el-radio v-model="is_self" label="2">非自营</el-radio>
              <i class="i-show">*</i>
            </div>
          </div>

          <div class="edit-list-box">
            <div class="label-box">账号状态</div>
            <div class="edit-cont-box">
              <el-radio v-model="account_status" label="0">正常</el-radio>
              <el-radio v-model="account_status" label="1">冻结</el-radio>
              <i class="i-show">*</i>
            </div>
          </div>

          <template v-if="is_self==1">
            <div class="edit-list-box">
              <div class="label-box">充值账户</div>
              <div class="edit-cont-box">
                <div class="edit-one">
                  <el-input-number v-model="account_recharge_balance" v-if="pageType==2" :precision="2">
                  </el-input-number>
                  <el-input v-else v-model="account_recharge_balance" type="number" placeholder="请输入充值账户"></el-input>
                </div>
                <i class="i-show">*</i>
              </div>
            </div>

            <div class="edit-list-box">
              <div class="label-box">特殊卡账户</div>
              <div class="edit-cont-box">
                <div class="edit-one">
                  <el-input-number v-model="special_recharge_balance" v-if="pageType==2" :precision="2">
                  </el-input-number>
                  <el-input v-else v-model="special_recharge_balance" type="number" placeholder="请输入特殊卡账户"></el-input>
                </div>
                <i class="i-show">*</i>
              </div>
            </div>
            <div class="edit-list-box">
              <div class="label-box">促销金额</div>
              <div class="edit-cont-box">
                <div class="edit-one">
                  <el-input v-model="promotion_balance" type="number" placeholder="请输入促销金额"></el-input>
                </div>
              </div>
            </div>

            <div class="edit-list-box">
              <div class="label-box">返促销金比例</div>
              <div class="edit-cont-box">
                <div class="edit-one">
                  <el-input v-model="promotion_proportion" type="number" placeholder="请输入纯数字">
                    <span slot="append">%</span>
                  </el-input>
                </div>
              </div>
            </div>

            <div class="edit-list-box">
              <div class="label-box">分成比例</div>
              <div class="edit-cont-box">
                <div class="edit-one">
                  <el-input v-model="franchiser_proportion" type="number" placeholder="请输入纯数字">
                    <span slot="append">%</span>
                  </el-input>
                </div>
                <i class="i-show">*</i>
              </div>
            </div>



            <div class="edit-list-box">
              <div class="label-box">充值卡分成比例</div>
              <div class="edit-cont-box">
                <div class="edit-one">
                  <el-input v-model="franchiser_recharge_proportion" type="number" placeholder="请输入纯数字">
                    <span slot="append">%</span>
                  </el-input>
                </div>
                <i class="i-show">*</i>
              </div>
            </div>


          </template>
        </div>


        <el-button :loading="submitLoading" style="margin-left: 135px;" size="medium" type="primary" @click="submit()">提
          交</el-button>
      </div>
    </div>


  </div>
</template>

<script>
  let promoterId = "";
  export default {
    data: function () {
      return {
        pageType: 1,
        account_name: "",
        password: '',
        rpassword: '',
        tel: '',
        ID_card: '',
        franchiser_proportion: "",
        franchiser_recharge_proportion: "", //充值卡分成比例
        address: '',
        account: '',
        account_status: '0',
        account_recharge_balance: 0,
        special_recharge_balance: 0,
        account_recharge_balance_origin: 0,
        special_recharge_balance_origin: 0,
        is_self: '2', //是否自营 1自营 2非自营
        promotion_balance: '', //促销金额
        promotion_proportion: '', //返促销金比例
        submitLoading: false,
      };
    },
    // 初始化运行
    created: function () {
      this.pageType = this.$route.query.type;
      if (this.pageType == 2) {
        this.getFranchiser();
      }
    },




    inject: ["reload"],
    methods: {
      RefreshFun() {
        // 调用reload方法，刷新整个页面
        this.reload();
      },
      //返回
      returnBack() {
        this.$router.back(-1);
      },

      getFranchiser() {
        this.$post({
          url: "Partner/Franchiser/getPartnerInfo",
          data: {
            id: this.$route.query.id
          }, success: res => {

            if (res.code > 0) {
              let source = res.data;
              this.account_name = source.account_name;
              this.account = source.account;
              this.tel = source.tel;
              this.ID_card = source.ID_card;
              this.franchiser_proportion = source.franchiser_proportion * 100;
              this.franchiser_recharge_proportion = source.franchiser_recharge_proportion * 100;
              this.address = source.address;
              this.account_recharge_balance = this.account_recharge_balance_origin = source.account_recharge_balance;
              this.special_recharge_balance = this.special_recharge_balance_origin = source.special_recharge_balance;
              this.is_self = source.is_self;
              this.promotion_balance = source.promotion_balance;
              this.promotion_proportion = source.promotion_proportion * 100;
            } else {
              this.$message.error(res.data);
            }
          }, error: e => {
            this.$message.error("网络错误");
          }
        })
      },


      submit() {
        if (this.account_name === '') {
          this.$message.error("请输入加盟商姓名");
          return;
        }
        if (this.tel === '') {
          this.$message.error("请输入加盟商手机号码");
          return;
        }
        if (this.tel.length < 11) {
          this.$message.error("请输入正确的手机号码");
          return;
        }
        if (this.account === '') {
          this.$message.error("请输入账号");
          return;
        }
        if (this.pageType == 1) {
          if (this.password === '') {
            this.$message.error("请输入密码");
            return;
          }
          if (this.rpassword === '') {
            this.$message.error("请重复密码");
            return;
          }
        }
        if (this.password !== this.rpassword) {
          this.$message.error("两次密码不一致");
          return;
        }
        if (this.address === '') {
          this.$message.error("请输入详细地址");
          return;
        }
        let source = {
          account_name: this.account_name,
          account: this.account,
          password: this.password,
          tel: this.tel,
          ID_card: this.ID_card,
          address: this.address,
          is_self: this.is_self,
          account_status: this.account_status
        }
        if (this.is_self == 1) {
          if (this.account_recharge_balance === '') {
            this.$message.error("请输入充值账户");
            return;
          }
          if (this.special_recharge_balance === '') {
            this.$message.error("请输入特殊卡账户");
            return;
          }
          if (this.franchiser_proportion === '') {
            this.$message.error("请输入分成比例");
            return;
          }
          if (this.franchiser_recharge_proportion === '') {
            this.$message.error("请输入充值卡分成比例");
            return;
          }
          Object.assign(source, {
            franchiser_proportion: this.franchiser_proportion,
            franchiser_recharge_proportion: this.franchiser_recharge_proportion,
            account_recharge_balance: this.account_recharge_balance,
            special_recharge_balance: this.special_recharge_balance,
            promotion_balance: this.promotion_balance,
            promotion_proportion: this.promotion_proportion
          });
        }
        let url = "Partner/Franchiser/addFranchiser";
        if (this.pageType == 2) {
          source.account_recharge_balance_add = this.accSub(this.account_recharge_balance - this.account_recharge_balance_origin);
          source.special_recharge_balance_add = this.accSub(this.special_recharge_balance - this.special_recharge_balance_origin);
          special_recharge_balance: this.special_recharge_balance,
            source.id = this.$route.query.id;
          url = "Partner/Franchiser/updateFranchiser";
        }
        this.submitLoading = true;
        this.$post({
          url,
          data: source,
          success: res => {
            this.submitLoading = false;
            if (res.code == 5000) {
              this.$message.success(res.message);
              setTimeout(() => {
                this.$router.back(-1);
              }, 2000)
            } else {
              this.$message.error(res.message);
            }
          },
          error: e => {
            this.submitLoading = false;
            this.$message.error("网络错误");
          }
        })
      },
      /**
      ** 减法函数，用来得到精确的减法结果
      ** 说明：javascript的减法结果会有误差，在两个浮点数相减的时候会比较明显。这个函数返回较为精确的减法结果。
      ** 调用：accSub(arg1,arg2)
      ** 返回值：arg1加上arg2的精确结果
      **/
      accSub(arg1, arg2) {
        if (isNaN(arg1)) {
          arg1 = 0;
        }
        if (isNaN(arg2)) {
          arg2 = 0;
        }
        arg1 = Number(arg1);
        arg2 = Number(arg2);

        var r1, r2, m, n;
        try {
          r1 = arg1.toString().split(".")[1].length;
        }
        catch (e) {
          r1 = 0;
        }
        try {
          r2 = arg2.toString().split(".")[1].length;
        }
        catch (e) {
          r2 = 0;
        }
        m = Math.pow(10, Math.max(r1, r2));  //动态控制精度长度
        n = (r1 >= r2) ? r1 : r2;
        return ((arg1 * m - arg2 * m) / m).toFixed(n);
      }


    }
  };
</script>

<style scoped>
  .edit-box {
    width: 100%;
    padding-bottom: 22px;
  }

  .edit-top-box {
    width: 100%;
    padding: 28px 30px;
    box-sizing: border-box;
    font-size: 16px;
    font-weight: 500;
    color: #2D5686;
  }

  .edit-top-box img {
    width: 15px;
    margin-right: 10px;
  }

  .edit-body-box {
    width: 1100px;
    padding: 0px 57px 0px 27px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
  }

  .edit-list-box {
    width: 50%;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }

  .label-box {
    width: 100px;
    margin-right: 10px;
    font-size: 14px;
    font-weight: 400;
    color: #4C4C4C;
    text-align: right;
    flex-shrink: 0;

  }

  .edit-cont-box {
    position: relative;

    min-width: 320px;
  }

  .edit-cont-box .i-show {
    position: absolute;
    top: 10px;
    right: -15px;
    font-style: normal;
    color: #FF6565;
  }

  .span-hint {
    position: absolute;
    bottom: -16px;
    left: 0px;
    font-size: 12px;
    font-weight: 400;
    color: #B3B3B3;
    width: 400px;
  }

  .edit-one {
    min-height: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .edit-comit {
    position: relative;
    min-width: 20px;
    padding: 0 8px;
  }

  .el-select {
    margin-right: 8px !important;
  }

  .el-input__inner {
    padding: 0px 10px !important;
  }

  .el-input--suffix .el-input__inner {
    height: 40px !important;
  }

  .ml-20 {
    margin-left: 20px;
  }

  .mr-20 {
    margin-right: 10px;
  }

  .subbtn {
    width: 720px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #2c5586;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    padding: 0 !important;
    margin: 20px 0;
  }
</style>